<template>
	<view class="">
		<view
			@tap="close"
			:class="['cu-modal', '', type, isShow ? 'show' : '']"
			:style="'height:' + height + ';' + 'width:' + width + ';' + 'right:' + right + ';' + 'left:' + left + ';' + 'top:' + navTop + 'px' + ';'"
		>
			<view class="cu-dialog pd40 pt20 ">
				<scroll-view :scrollY="true" :style="'max-height:' + windowHeight * 0.6 + 'px' + ';'"><slot></slot></scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data: function() {
		return {
			isShow: !1,
			navTop: 0,
			windowHeight: this.windowHeight
		};
	},
	props: {
		modalName: {
			type: String,
			default: ''
		},
		width: {
			type: [Number, String],
			default: '100%'
		},
		height: {
			type: [Number, String],
			default: '100%'
		},
		left: {
			type: [Number, String],
			default: 0
		},
		right: {
			type: [Number, String],
			default: 0
		},
		type: {
			type: String,
			default: 'fromTop' //'fromTop'
		}
	},
	methods: {
		open: function() {
			this.isShow = !0;
		},
		close: function() {
			(this.isShow = !1), this.$emit('close');
		}
	}
};
</script>

<style>
.cu-modal {
	backface-visibility: hidden;
	background: rgba(0, 0, 0, 0.6);
	opacity: 0;
	outline: 0;
	pointer-events: none;
	position: fixed;
	text-align: center;
	transition: all 0.3s ease-in-out 0s;
	z-index: 1000;
}

.cu-modal.fromRight.show,
.cu-modal.fromTop.show {
	opacity: 1;
	overflow-x: hidden;
	overflow-y: auto;
	pointer-events: auto;
	transform: scale(1);
	transition-duration: 0.3s;
}

.cu-modal.fromRight.show .cu-dialog,
.cu-modal.fromTop.show .cu-dialog {
	opacity: 1;
	transition-duration: 0.3s;
}

.cu-modal.fromRight .cu-dialog,
.cu-modal.fromTop .cu-dialog {
	background-color: #fff;
	opacity: 0;
	position: relative;
	text-align: left;
}

.cu-modal.fromTop .cu-dialog {
	margin-top: -1000rpx;
}

.cu-modal.fromTop.show .cu-dialog {
	margin-top: 0;
}

.cu-modal.fromRight .cu-dialog {
	margin-right: -1000rpx;
}

.cu-modal.fromRight.show .cu-dialog {
	margin-right: 0;
}
</style>
